/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.wanhai.itm.wditm133.vm;

import java.util.ArrayList;
import java.util.List;
import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.Init;
import org.zkoss.chart.Chart;
import org.zkoss.chart.Charts;
import org.zkoss.chart.Point;
import org.zkoss.chart.Series;
import org.zkoss.chart.plotOptions.PieDataLabels;
import org.zkoss.chart.plotOptions.PiePlotOptions;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;

/**
 *
 * @author m2434
 */
public class Wditm133PieChartVM {
    List<Series> seriesList = new ArrayList<Series>();
    
    ///<editor-fold defaultstate="collapsed" desc="binding UI component">
    @Wire("#pieChart")
    private Charts pieChart;
    //</editor-fold>
        
    @Init
    public void init(){
        Series data1 = new Series();
        data1.setName("data1");
        
        data1.addPoint(new Point("Firefox", 45.0));
        data1.addPoint(new Point("IE", 26.8));
        Point chrome = new Point("Chrome", 12.8);
        chrome.setSelected(true);
        chrome.setSliced(true);
        data1.addPoint(chrome);
        data1.addPoint(new Point("Safari", 8.5));
        data1.addPoint(new Point("Opera", 6.2));
        data1.addPoint(new Point("Others", 0.7));
        
        Series data2 = new Series();
        data2.setName("data2");
        
        data2.addPoint(new Point("Firefox", 25.0));
        data2.addPoint(new Point("IE", 23.4));
        chrome = new Point("Chrome", 32.2);
        chrome.setSelected(true);
        chrome.setSliced(true);
        data2.addPoint(chrome);
        data2.addPoint(new Point("Safari", 12.8));
        data2.addPoint(new Point("Opera", 3.2));
        data2.addPoint(new Point("Others", 3.4));
        
        Series data3 = new Series();
        data3.setName("data3");
        
        data3.addPoint(new Point("Firefox", 18.6));
        data3.addPoint(new Point("IE", 27.4));
        chrome = new Point("Chrome", 36.2);
        chrome.setSelected(true);
        chrome.setSliced(true);
        data3.addPoint(chrome);
        data3.addPoint(new Point("Safari", 1.2));
        data3.addPoint(new Point("Opera", 5.2));
        data3.addPoint(new Point("Others", 11.4));
        
        this.getSeriesList().add(data1);
        this.getSeriesList().add(data2);
        this.getSeriesList().add(data3);
    }
    
    @Command("refreshData")
    public void refreshData(@BindingParam("row") Series s){
        pieChart.getSeries().remove();
        
        Series series = pieChart.getSeries();
        series.setType("pie");
        series.setName("Browser share");
        
        for(Point point : s.getData()){
            series.addPoint(point);
        }
        
        
        Chart chartOptional = pieChart.getChart();
        chartOptional.setPlotBorderWidth(0);
        chartOptional.setPlotShadow(false);
        
        pieChart.getTooltip().setPointFormat(
            "{series.name}: <b>{point.percentage:.1f}%</b>");
        
        PiePlotOptions plotOptions = pieChart.getPlotOptions().getPie();
        
        plotOptions.setAllowPointSelect(true);
        plotOptions.setCursor("pointer");
        PieDataLabels dataLabels = (PieDataLabels)plotOptions.getDataLabels();
        dataLabels.setEnabled(true);
        dataLabels.setFormat("<b>{point.name}</b>: {point.percentage:.1f} %");
        pieChart.invalidate();
    }
    
    @AfterCompose
    public void afterCompose(@ContextParam(ContextType.VIEW) Component view){
        Selectors.wireComponents(view, this, false);
    }

    //<editor-fold defaultstate="collapsed" desc="getter, setter">
    public List<Series> getSeriesList() {
        return seriesList;
    }
    
    public void setSeriesList(List<Series> seriesList) {
        this.seriesList = seriesList;
    }
    //</editor-fold>
    
    
}
